<template>
    <Layout :sideWidth="isCollapse ? 65 : 220">
        <template #left_side>
            <Menu :isCollapse="isCollapse" :router="router"></Menu>
        </template>
        <template #head>
            <div class="left">
                <el-space>
                    <div class="icon" @click="isCollapseHandler">
                        <el-icon color="#606266" :size="24" v-if="isCollapse">
                            <Expand />
                        </el-icon>
                        <el-icon color="#606266" :size="24" v-else>
                            <Fold />
                        </el-icon>
                    </div>
                    <div class="breadcrumb">
                        <Breadcrumb></Breadcrumb>
                    </div>
                </el-space>
            </div>
            <div class="right">
                <el-dropdown trigger="click">
                    <span class="dropdown">
                        <el-space>
                            <div class="name">
                                {{ userStore.userInfo.name }}
                            </div>
                            <div class="avavar" :style="{ 'background-image': `url(${userStore.userInfo.avatar})` }">
                            </div>
                        </el-space>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>项目说明</el-dropdown-item>
                            <el-dropdown-item>个人信息</el-dropdown-item>
                            <el-dropdown-item>修改密码</el-dropdown-item>
                            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </template>
        <template #default>
            <router-view></router-view>
        </template>
    </Layout>
</template>

<script setup>
import Layout from '@/views/layout/Layout.vue'
import Menu from '@/views/layout/menu/Menu.vue'
import Breadcrumb from '@/views/layout/breadcrumb/Breadcrumb.vue'

import router from '@/router/routes';


import { useUserStore } from '@/stores';
const userStore = useUserStore()

import { ref, computed, watch, reactive, onMounted } from 'vue'

const isCollapse = ref(false)

const isCollapseHandler = () => {
    isCollapse.value = !isCollapse.value
}

const logout = () => {
    ElMessageBox.confirm(
        '您确定要退出登录吗?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            userStore.logout()
        })
       
}

</script>

<style scoped lang='less'>
.left {
    display: flex;

    .icon {
        display: flex;
        align-items: center;
    }

    .breadcrumb {
        display: flex;
        align-items: center;
    }
}

.right {
    display: flex;
    align-items: center;

    .dropdown {
        display: flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;

        &:hover {
            background-color: #F8F8F9
        }

        .name {
            font-size: 16px;
            font-weight: 500;
        }

        .avavar {
            width: 40px;
            height: 40px;
            border-radius: 30px;
            background-size: cover
        }
    }
}

.card {
    height: 100%;
    min-height: 500px;
}
</style>